<template>
  <div class="projectRoleSettingContainer" v-loading="loading">
    <div class="topContent">
      <div class="roleName">
        <div class="nameShow" style="display: flex; align-items: center">
          <img class="avatar" src="@/assets/pm/roleAvatar.svg" />
          <span class="name">{{ roleDetail?.name?.zh_CN }}</span>
          <img
            v-if="roleDetail.isManager === 'NO'"
            @click="handleShowEdit"
            class="editIcon"
            src="@/assets/pm/edit.svg"
          />
        </div>
        <div v-show="showEditName" class="editName">
          <el-input
            style="margin-right: 16px"
            placeholder="请输入角色名称"
            v-model="roleName"
          />
          <el-button @click="handleEditRoleName" type="text">确定</el-button>
          <el-button @click="showEditName = false" type="text">取消</el-button>
        </div>
      </div>
      <el-button v-if="roleDetail.isManager === 'NO'" @click="saveSetting"
        >保存当前配置</el-button
      >
    </div>

    <div class="label"><span class="line"></span>任务列表权限</div>
    <div class="content">
      <div class="content-title">任务列表数据权限</div>
      <el-checkbox
        v-model="roleCheckPremission.checkAll"
        :disabled="roleDetail.isManager === 'YES'"
        label="全选"
        :indeterminate="roleCheckPremission.indeterminateCheckAll"
        @change="handleCheckTaskListPermissionAll"
      ></el-checkbox
      ><br />
      <el-checkbox
        v-model="roleCheckPremission.fieldCheckAll"
        :disabled="roleDetail.isManager === 'YES'"
        :indeterminate="roleCheckPremission.indeterminateFieldCheckAll"
        label="全部字段编辑权限"
        @change="handleCheckTaskFieldPermissionAll"
      ></el-checkbox
      ><br />
      <template
        v-if="
          roleDetail.permission &&
          roleDetail.permission?.fieldPermission?.length
        "
      >
        <el-checkbox
          v-for="(item, index) in roleDetail.permission.fieldPermission"
          :key="index"
          :disabled="roleDetail.isManager === 'YES'"
          :label="item.name"
          v-model="item.value"
          @change="handleFieldCheckChange"
        ></el-checkbox>
        <br />
      </template>

      <el-checkbox
        v-model="roleCheckPremission.functionCheckAll"
        :indeterminate="roleCheckPremission.indeterminateFunctionCheckAll"
        label="全部功能权限"
        :disabled="roleDetail.isManager === 'YES'"
        @change="handleCheckTaskFunctionPermissionAll"
      ></el-checkbox
      ><br />
      <template
        v-if="
          roleDetail.permission &&
          roleDetail.permission?.fieldPermission?.length
        "
      >
        <el-checkbox
          v-for="(item, index) in roleDetail.permission.functionPermission"
          :key="index"
          :label="item.name"
          :disabled="roleDetail.isManager === 'YES'"
          v-model="item.value"
          @change="handleFieldCheckChange"
        ></el-checkbox>
        <br />
      </template>
    </div>

    <div class="label"><span class="line"></span>视图管理</div>
    <div class="content">待开发</div>
    <div class="label"><span class="line"></span>项目管理</div>
    <div class="content">待开发</div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, reactive, watch } from "vue";
  interface Prop {
    roleId: string;
  }
  const props = defineProps<Prop>();
  interface Emits {
    refresh: [];
  }
  const emits = defineEmits<Emits>();
  import {
    editProjectRole,
    getProjectRoleDetail,
  } from "@/api/pm/projectRole.ts";
  import type { globalRoleVo } from "@/interface/pm/globalProjRole.ts";
  import { ElMessage } from "element-plus";
  import { deepCopy } from "@/utils/common.ts";
  const loading = ref(true);
  const roleDetail = ref<globalRoleVo>({});
  const roleName = ref("");
  const showEditName = ref(false);
  const roleCheckPremission = reactive({
    checkAll: false,
    indeterminateCheckAll: false,
    fieldCheckAll: false,
    indeterminateFieldCheckAll: false,
    functionCheckAll: false,
    indeterminateFunctionCheckAll: false,
  });

  const handleCheckTaskListPermissionAll = () => {
    roleDetail.value.permission?.fieldPermission?.map((item) => {
      item.value = roleCheckPremission.checkAll;
    });
    roleDetail.value.permission?.functionPermission?.map((item) => {
      item.value = roleCheckPremission.checkAll;
    });
    // roleCheckPremission.checkAll = true;
    roleCheckPremission.indeterminateCheckAll = false;
    roleCheckPremission.fieldCheckAll = roleCheckPremission.checkAll;
    roleCheckPremission.indeterminateFieldCheckAll = false;
    roleCheckPremission.functionCheckAll = roleCheckPremission.checkAll;
    roleCheckPremission.indeterminateFunctionCheckAll = false;
  };

  const handleCheckTaskFieldPermissionAll = () => {
    roleDetail.value.permission?.fieldPermission?.map((item) => {
      item.value = roleCheckPremission.fieldCheckAll;
    });
    handleFieldCheckChange();
  };

  const handleCheckTaskFunctionPermissionAll = () => {
    roleDetail.value.permission?.functionPermission?.map((item) => {
      item.value = roleCheckPremission.functionCheckAll;
    });
    handleFieldCheckChange();
  };

  const handleFieldCheckChange = () => {
    const checkFieldCount =
      roleDetail.value.permission?.fieldPermission?.filter((item) => item.value)
        .length || 0;
    const checkFunctionCount =
      roleDetail.value.permission?.functionPermission?.filter(
        (item) => item.value,
      ).length || 0;
    roleCheckPremission.indeterminateCheckAll = !!(
      checkFieldCount + checkFunctionCount
    );
    const allCount =
      (roleDetail.value.permission?.fieldPermission?.length || 0) +
      (roleDetail.value.permission?.functionPermission?.length || 0);
    roleCheckPremission.checkAll =
      allCount === checkFunctionCount + checkFieldCount &&
      checkFunctionCount > 0 &&
      checkFieldCount > 0;
    roleCheckPremission.indeterminateCheckAll =
      checkFieldCount > 0 && !roleCheckPremission.checkAll;
    roleCheckPremission.fieldCheckAll =
      (roleDetail.value.permission?.fieldPermission?.length || 0) ===
        checkFieldCount && checkFieldCount > 0;
    roleCheckPremission.indeterminateFieldCheckAll =
      checkFieldCount > 0 && !roleCheckPremission.fieldCheckAll;

    roleCheckPremission.functionCheckAll =
      (roleDetail.value.permission?.functionPermission?.length || 0) ===
        checkFunctionCount && checkFunctionCount > 0;
    roleCheckPremission.indeterminateFunctionCheckAll =
      checkFunctionCount > 0 && !roleCheckPremission.functionCheckAll;
  };
  const getRoleSettings = async () => {
    loading.value = true;
    const res = await getProjectRoleDetail(props.roleId);
    loading.value = false;
    roleDetail.value = res;
    roleName.value = res.name?.zh_CN || "";
    handleFieldCheckChange();
  };
  const handleShowEdit = () => {
    showEditName.value = true;
    roleName.value = roleDetail.value.name?.zh_CN || "";
  };

  const handleEditRoleName = async () => {
    if (!roleName.value) {
      ElMessage({
        type: "warning",
        message: "角色名称不能为空",
      });
      return;
    }
    const params = deepCopy(roleDetail.value);
    if (params.name) {
      params.name.zh_CN = roleName.value;
    }
    await editProjectRole(params);
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    emits("refresh");
    showEditName.value = false;
    getRoleSettings();
  };
  const saveSetting = async () => {
    await editProjectRole(roleDetail.value);
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    emits("refresh");
    getRoleSettings();
  };
  defineExpose({
    getRoleSettings,
  });
  onMounted(() => {
    // getRoleSettings();
  });
</script>

<style scoped lang="scss">
  .projectRoleSettingContainer {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    .topContent {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      margin-bottom: 20px;
      .roleName {
        display: flex;
        align-items: center;
        .nameShow {
          .avatar {
            width: 20px;
            height: 20px;
          }
          .name {
            font-weight: 600;
            margin: 0 6px;
          }
          .editIcon {
            visibility: hidden;
            cursor: pointer;
          }

          &:hover {
            .editIcon {
              visibility: visible;
            }
          }
        }
        .editName {
          display: flex;
          margin-left: 130px;
        }
      }
    }
    .label {
      color: #1d2129;
      font-weight: 500;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .line {
        display: inline-block;
        width: 5px;
        height: 18px;
        background: #1aa1fb;
        margin-right: 7px;
      }
    }
    .content {
      padding: 16px;
      background: #f6f7fa;
      border-radius: 4px;
      margin-bottom: 20px;
      .content-title {
        color: #1d2129;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }
</style>
